<template>
    <div>
        <swiper :options="swiperOption">
       <swiper-slide class="slide-item" v-for="(item,index) in imgList" :key="index">
                <img :src="item.img_url"/>
            </swiper-slide>
          <!-- <swiper-slide class="slide-item"><img src="../../../../../../assets/images/bd.jpg"/></swiper-slide>
            <swiper-slide class="slide-item"><img src="../../../../../../assets/images/bd.jpg"/></swiper-slide>
            <swiper-slide class="slide-item"><img src="../../../../../../assets/images/bd.jpg"/></swiper-slide>
            <swiper-slide class="slide-item"><img src="../../../../../../assets/images/bd.jpg"/></swiper-slide>-->
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
    </div>
</template>

<script>
import { getImgList } from '@/api/site'
export default {
  name: 'siteImg',
  data () {
    return {
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        }
      },
      imgList: []
    }
  },
  methods: {
    init () {
      getImgList().then(ret => {
        this.imgList = ret.data.data.list
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .slide-item img{
        height: 530px;
    }
</style>
